<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Web</title>
  <link rel="stylesheet" type="text/css" href="./css/style.css" />
  <script src="js/echarts.min.js"></script>
</head>

<body>
  <h1>WebView Demo</h1>
  <section class="contents">
    <aside class="aside aside-show">
      <menu class="menu">
        <MenuItem name="home" class="actived">
        <img src="./assets/home-outline.svg"></img>
        <span>Home</span>
        </MenuItem>
        <MenuItem name="entries">
        <img src="./assets/list-outline.svg"></img>
        <span>Entries</span>
        </MenuItem>
        <MenuItem name="set">
        <img src="./assets/settings-2-outline.svg"></img>
        <span>Set</span>
        </MenuItem>
      </menu>
      <div class="toolbar" title="隐藏">
        <i class="icon left"></i>
        <i class="icon right hidden"></i>
      </div>
    </aside>
    <main class="main">
      <div class="home-main">
        <div id="barchart_1"></div>
        <div id="barchart_2"></div>
        <div id="barchart_3"></div>
      </div>
      <div class="entries-main hide">
        <table class="table" border>
          <thead>
            <tr>
              <th>
                <div>日期</div>
              </th>
              <th>
                <div>姓名</div>
              </th>
              <th>
                <div>省份</div>
              </th>
              <th>
                <div>市区</div>
              </th>
              <th>
                <div>地址</div>
              </th>
              <th>
                <div>邮编</div>
              </th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
      <div class="set-main hide">
        <div id="demo_controls">
          <fieldset id="fx">
            <legend>Effects</legend>
            <div class="tight">
              <input value="Shadow" data-fx="shadow" type="button" class="fx" />
            </div>
            <div class="tight">
              <input value="Mirror" data-fx="mirror" type="button" class="fx" />
            </div>
            <div class="tight">
              <input value="Resize" data-fx="resize" type="button" class="fx align-top" />
            </div>
            <div class="tight speical">
              <input value="Spin" data-fx="spin" type="button" class="fx" />
              <input type="range" value="0" min="-180" max="180" list="markers" id="rotation" />
              <datalist id="markers">
                <option value="-180"></option>
                <option value="-135"></option>
                <option value="-45"></option>
                <option value="0"></option>
                <option value="45"></option>
                <option value="135"></option>
                <option value="180"></option>
              </datalist>
            </div>
            <div class="tight">
              <input value="Device" data-fx="handheld" type="button" class="fx" />
            </div>
          </fieldset>
          <fieldset id="interop">
            <legend>JS Interop</legend>
            <div class="interop">
              <label for="screen-selector">
                Screen
              </label>
              <select name="screen-select" id="screen-selector" class="screen">
                <option value="counter">Counter</option>
                <option value="textField">TextField</option>
                <option value="custom">Custom</option>
              </select>
            </div>
            <div class="interop">
              <label for="value">
                Value
              </label>
              <input id="value" value="" type="text" readonly />
              <input id="increment" value="Increment" type="button" />
            </div>
          </fieldset>
        </div>
        <div class="set-main_content">
          <div id="set_target">
            <div id="counter" class="set_target--content">
              <title>Counter</title>
              <article>
                <div class="counter--content">
                  <span>按钮点击次数：</span>
                  <p id="countBtn">0</p>
                </div>
                <button id="counter_increment">+</button>
              </article>
            </div>
            <div id="textField" class="set_target--content hide">
              <title>Note to Self</title>
              <article>
                <div class="textField--content">
                  <textarea rows="1" class="my-text-area" maxlength="1000"></textarea>
                </div>
              </article>
            </div>
            <div id="custom" class="set_target--content hide">
              <title>Count as Input</title>
              <article>
                <div class="custom--content">
                  <div class="top--show">
                    <p style="position: absolute;left: 0;top: 0;">您输入了：</p>
                    <p class="top--show--p">
                      <strong id="customerInput"></strong>
                      <span>个字符</span>
                    </p>
                  </div>
                  <div class="bottom--input">
                    <input value="" oninput="customerOnInput(value)" maxlength="1000">
                    <img src="./assets/refresh-outline.svg" onclick="resetCustomerInput(event)"></img>
                  </div>
                </div>
              </article>
            </div>
          </div>
        </div>

        <div class="settings">
          <div class="settings-item">
            <div class="settings-item-sys">
              系统设置
            </div>
          </div>
          <div class="settings-item">
            <div class="settings-item-sys">
              账户设置
            </div>
          </div>
          <div class="settings-item">
            <div class="settings-item-sys">
              声音设置
            </div>
          </div>
          <div class="settings-item">
            <div class="settings-item-sys">
              更多设置
            </div>
          </div>
        </div>
      </div>
      </div>
    </main>
  </section>
  <script type="text/javascript"></script>
  <script src="js/home.js" defer></script>
  <script src="js/aside.js" defer></script>
  <script src="js/entries.js" defer></script>
  <script src="js/control.js" defer></script>
  <script src="js/interop.js" defer></script>
</body>

</html>